<template>
	<div class="personnelAdd">
		<div class="header_ContentBox pl_10 pr_10">
			<i class="lhadmin lhadmin-renzheng Icon"></i>
			<span class="pl_10 pr_10">/</span>
			<span class="header_text">B端-商户 / 商户管理 / 商户信息</span>
		</div>
		<div class="content_Box box-shadow mt_15 pl_10 pr_10">
			<div>
				<h4 class="border-bottom pb_10">基本信息</h4>
			</div>
			<div class="pt_10">
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>商户类型</div>
					<div class="fl list-cont">
						<el-select v-model="dataMes.type">
							<el-option label="企业" value="1"></el-option>
							<el-option label="个人" value="2"></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>商户名称</div>
					<div class="fl list-cont">
						<el-input v-model="dataMes.name"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>商户负责人</div>
					<div class="fl list-cont">
						<el-input v-model="dataMes.merchant_name"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>负责人手机号</div>
					<div class="fl list-cont">
						<el-input v-model="dataMes.merchant_phone"></el-input>
					</div>
					<div class="fl title-key" style="width: 200px;">（用于验证码登录或密码登录账号）</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">所属行业</div>
					<div class="fl list-cont">
						<el-select v-model="dataMes.industry" disabled>
							<el-option label="餐饮" value="1"></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">所在城市</div>
					<div class="fl list-cont">
						<el-select v-model="city_arr" placeholder="请选择" @change="changeBtndialog">
							<el-option
								v-for="item in cityList"
								:key="item.id"
								:label="item.city_name"
								:value="`${item.id}|${item.city_name}`"
							>
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">联系地址</div>
					<div class="fl list-cont">
						<el-input v-model="dataMes.address"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">电子邮箱</div>
					<div class="fl list-cont">
						<el-input v-model="dataMes.email"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">销售</div>
					<div class="fl list-cont">
						<el-autocomplete
							class="inline-input"
							v-model="dataMes.bd_name"
							:fetch-suggestions="querySearch"
							placeholder="请输入内容"
							:trigger-on-focus="true"
							@select="handleSelect"
						></el-autocomplete>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">联系电话</div>
					<div class="fl list-cont">
						<el-input v-model="dataMes.bd_phone"></el-input>
					</div>
				</div>
			</div>
			<div class="ml_110 mt_80">
				<span class="resetBtn mr_10" @click="back">返回</span>
				<span class="btnOK" @click="submitBtn">保存</span>
			</div>
			<!-- 商务负责人？？？ -->
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { mainfun } from '../../../assets/js/main.js'
export default {
	name: 'MerchantsEdit',
	data() {
		return {
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			cityList: [], //城市列表
			//相关数据
			dataMes: {},
			city_arr: '',
			city_id: '',
			city_name: '',
			BusinessUserList: [] //商务负责人列表
		}
	},

	mounted() {
		this.id = this.$route.query.id //接收传参
		this.getBusinessUser()
		this.startResult()
		this.getcityList()
	},
	methods: {
		//获取商务负责人列表
		getBusinessUser() {
			let fn = new FormData()
			this.$http.post(this.url + '/manageUser/getBusinessUser', fn).then(
				res => {
					console.log(res.data.data)
					if (res.data.msg == '查询成功!' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.forEach(item => {
								item.value = item.nickname
							})
							this.BusinessUserList = res.data.data
						} else {
							this.BusinessUserList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		startResult() {
			// 请求商户详情接口
			let fn = new FormData()
			fn.append('id', this.$route.query.id) //商铺ID
			this.$http.post(this.url + '/business/info', fn).then(
				res => {
					if (res.data.msg == '查询成功!' || res.data.code == '200') {
						this.dataMes = res.data.data
						//string转换
						this.dataMes.type = this.dataMes.type.toString()
						this.dataMes.industry = this.dataMes.industry.toString()
						this.city_arr = this.dataMes.city_id + '|' + this.dataMes.city_name
						this.city_id = this.dataMes.city_id
						this.city_name = this.dataMes.city_name
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$alert('<strong>' + res.data.msg + '</strong>', '提示', {
							dangerouslyUseHTMLString: true
						})
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		submitBtn() {
			// 编辑接口
			let fn = new FormData()
			fn.append('id', this.id) //相关id

			fn.append('type', this.dataMes.type)
			fn.append('name', this.dataMes.name)
			fn.append('merchant_name', this.dataMes.merchant_name)
			fn.append('merchant_phone', this.dataMes.merchant_phone)
			fn.append('industry', 1)
			fn.append('city_id', this.city_id)
			fn.append('city_name', this.city_name)
			fn.append('address', this.dataMes.address)
			fn.append('email', this.dataMes.email)
			fn.append('bd_name', this.dataMes.bd_name)
			fn.append('bd_userid', this.dataMes.bd_userid)
			fn.append('bd_phone', this.dataMes.bd_phone)
			this.$http.post(this.url + '/business/edit', fn).then(
				res => {
					// console.log(res);
					if (res.data.msg == '修改成功!' || res.data.code == '200') {
						this.$message.success(res.data.msg)
						this.back()
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		getcityList() {
			//获取城市列表
			let fn = new FormData()
			this.$http.post(this.url + '/city/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						this.cityList = res.data.data.list
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		changeBtndialog() {
			let [id, name] = this.city_arr.split('|') // es6 数组解构赋值
			this.city_id = id.toString()
			this.city_name = name.toString()
		},
		back() {
			//返回
			this.$router.go(-1)
		},
		//自动完成
		querySearch(queryString, cb) {
			var restaurants = this.BusinessUserList
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect(item) {
			console.log(item)
			this.dataMes.bd_name = item.nickname
			this.dataMes.bd_userid = item.user_id
		}
	},
	filters: {}
}
</script>

<style scoped>
.personnelAdd {
	margin: 15px 15px 0 15px;
}
.row-info {
	padding: 10px 0;
}
.resetBtn,
.btnOK {
	padding: 0 30px;
}
.title-key {
	width: 100px;
}
.list-cont img {
	width: 128px;
}
</style>



// WEBPACK FOOTER //
// src/components/shop/ShopEdit.vue